﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NetCore | Vue</title>
    <link rel="stylesheet" href="/lib_bower/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/lib_bower/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="/css/site.css" />

</head>

<body class="gray-bg">
    <div class="loginColumns animated fadeInDown">
        <div class="row">
            <div class="col-md-6">
                <h2 class="font-bold">Welcome to Vue</h2>

                <p>
                    Perfectly designed and precisely prepared admin theme with over 50 pages with extra new web app views.
                </p>

                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                </p>

                <p>
                    When an unknown printer took a galley of type and scrambled it to make a type specimen book.
                </p>

                <p>
                    <small>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</small>
                </p>

            </div>
            <div class="col-md-6">
                <div class="ibox-content">

                    <form method="post" class="form-horizontal" role="form" action="/Login/Login" onsubmit="return false;">
                        <div class="text-danger validation-summary-valid" data-valmsg-summary="true">
                            <ul>
                                <li v-if="errors.has('error')">{{ errors.first('error')}}</li>
                            </ul>

                        </div>
                        <div class="form-group" :class="{ 'has-error': errors.has('UserName') }">
                            <label class="col-md-3 control-label text-right" for="UserName">账  号</label>
                            <div class="col-md-9">
                                <i class="input-icon fa fa-user"></i>

                                <input maxlength="16" class="form-control" v-validate="'required|min:5|max:16'" data-vv-as="用户名" type="text" name="UserName" id="UserName" v-model="UserName" />

                                <span class="text-danger field-validation-valid" v-if="errors.has('UserName')">{{errors.first('UserName')}}</span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label text-right" for="Password" :class="{ 'has-error': errors.has('Password') }">密  码</label>
                            <div class="col-md-9">
                                <input :type="passwordType" class="form-control" v-validate="'required|min:6|max:16'" maxlength="16" data-vv-as="密码" id="Password" name="Password" v-model="Password" />
                                <i class="input-icon fa " :class="passwordType==='password'?'fa-eye-slash':'fa-eye'" style="cursor:pointer;" @click="showPwd"></i>
                                <span class="text-danger field-validation-valid" v-if="errors.has('Password')">{{errors.first('Password')}}</span>
                            </div>
                        </div>
                        <div class="form-group">

                            <div class="col-md-offset-3 col-md-9">
                                <div class="i-checks">
                                    <label class="i-checkbox" for="RememberMe"><input class="checkbox" type="checkbox" data-val="true" data-val-required="The RememberMe field is required." id="RememberMe" name="RememberMe" v-model="RememberMe" /><span style="float:right;">Remember Me </span></label>
                                </div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="col-md-offset-2 col-md-10">
                                <button type="submit" class="btn btn-primary block full-width m-b" @click="Login">Log in</button>
                            </div>
                        </div>

                        <p class="text-muted text-center">
                            <a href="/Account/ForgotPassword">Forgot your password?</a>
                        </p>
                        <p class="text-muted text-center"><small>Do not have an account?</small></p>
                        <p>
                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-10">
                                    <a class="btn btn-w-m btn-white btn-block  " href="/Account/Register">Register as a new user?</a>
                                </div>
                            </div>
                        </p>

                    </form>

                </div>
            </div>
        </div>
        <hr />
        <div class="row">
            <div class="col-md-6">
                Copyright Example Company
            </div>
            <div class="col-md-6 text-right">
                <small>© 2014-2015</small>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="/lib/vue/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script type="text/javascript" src="/lib/vue/extends/vee/vee-validate.min.js"></script>
    <script type="text/javascript" src="/lib/vue/extends/vee/zh_CN.js"></script>
    <script type="text/javascript" src="/lib/vue/extends/vee/vee-extend.js"></script>
    <script type="text/javascript" src="/js/site.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: ".form-horizontal",
            data() {
                return {
                    UserName: '',
                    Password: '',
                    RememberMe: false,
                    passwordType: 'password'
                }
            },
            computed: {
                results() {
                    return {
                        UserName: this.UserName,
                        Password: this.Password,
                        RememberMe: this.RememberMe
                    }
                }
            },
            created() {
                //if (this.$options.User.Token!="") {
                //    window.location.href = "/";
                //}
            },
            methods: {
                showPwd() {
                    this.passwordType = this.passwordType == "password" ? "" : "password";
                }

            }
        });

    </script>

</body> 


</html>